<html><!--
   https://bugzilla.mozilla.org/show_bug.cgi?id=511909
   --><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>@media and @-moz-document testcases</title>
  
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">

<style type="text/css">
a {
    font-weight: bold; 
}
  #pink {
    color: pink;
  }
  
  #green {
    color: green;
  }
  
  #blue {
    color: blue;
  }


pre {
   border: 1px solid black;
}
</style>
  
<style type="text/css">
@-moz-document regexp(".*test_bug511909.*"){
    #d {
      color: pink;
    }
}

</style>
  
<style type="text/css">
    
@media screen {
   #m {
      color: green;
   }
}

</style>
  
<style type="text/css">
  
@-moz-document regexp(".*test_bug511909.*"){
  @media screen {
      #dm {
         color: blue;
      }
   }
}

</style>
  
<!-- should parse -->
<style type="text/css">

@media print {
  @-moz-document regexp("not_this_url"),}
    #mx {
        color: pink;
    }
  }
}

</style>
  
<!-- should parse -->
<style type="text/css">
    
@-moz-document regexp("not_this_url"){
  @media print ,}
    #mxx {
      color: blue;
    }
  }
}

</style>
  
<style type="text/css">  
  
@media screen {
  @-moz-document regexp(".*test_bug511909.*"){
      #md {
         color: green;
      }
   }
}

</style>
  
<style type="text/css">
    
@media screen {
  @-moz-document regexp(".*test_bug511909.*"){
      @media screen { 
        @-moz-document regexp(".*test_bug511909.*"){
          @media screen {
            #me {
             color: blue; 
            }
          }
        }
     }
   }
}
  
</style>
</head>
<body>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=511909">Mozilla Bug 511909</a>
  <p id="display"></p>
  <div id="content" style="display: none">
    
  </div>
  
  <script class="testbody" type="text/javascript">

    SimpleTest.waitForExplicitFinish();
    
    addLoadEvent(function() {
    var pink = getComputedStyle(document.getElementById("pink"), "");
    var green = getComputedStyle(document.getElementById("green"), "");
    var blue = getComputedStyle(document.getElementById("blue"), "");
                 
    var cs1 = getComputedStyle(document.getElementById("d"), "");
    var cs2 = getComputedStyle(document.getElementById("m"), "");
    var cs3 = getComputedStyle(document.getElementById("dm"), "");
    var cs4 = getComputedStyle(document.getElementById("md"), "");
    var cs5 = getComputedStyle(document.getElementById("mx"), "");                 
    var cs6 = getComputedStyle(document.getElementById("mxx"), "");                  
    var cs7 = getComputedStyle(document.getElementById("me"), "");  
                 
    is(cs1.color, pink.color, "@-moz-document applies");
    is(cs2.color, green.color, "@media applies");
    is(cs3.color, blue.color, "@media nested in @-moz-document applies");
    is(cs4.color, green.color, "@-moz-document nested in @media applies");
    is(cs5.color, pink.color, "broken @media nested in @-moz-document correctly handled");      
    is(cs6.color, blue.color, "broken @-moz-document nested in @media correctly handled");   
    is(cs7.color, blue.color, "@media nested in @-moz-document nested in @media applies");
    SimpleTest.finish();
    });
  </script>
<div>
<pre>default style
</pre>
<a id="pink">This line should be pink</a><br>
  
<a id="green">This line should be green</a><br>
  
<a id="blue">This line should be blue</a><br>
  
<pre>@-moz-document {...}
</pre>
<a id="d">This line should be pink</a><br>
<pre>@media screen {...}
</pre>
<a id="m">This line should be green</a><br>
<pre>@-moz-document {
   @media screen {...}
}
</pre>
<a id="dm">This line should be blue</a><br>
<pre>@media print {
  @-moz-document regexp("not_this_url"),}
    #mx {
        color: pink;
    }
  }
}
</pre>
<a id="mx">This line should be pink</a><br></div>
<pre>@-moz-document regexp("not_this_url"){
  @media print ,}
    #mxx {
      color: blue;
    }
  }
}
</pre>
<a id="mxx">This line should be blue</a><br>
<pre>@media screen {
  @-moz-documen {...}
}
</pre>
<a id="md">This line should be green</a><br>
<pre>@media screen {
  @-moz-document {
    @media screen {...}
  }
}
</pre>
<a id="me">This line should be blue</a><br>


</body></html>
